import React,{ Component , Fragment} from 'react';
import {NavLink} from 'react-router-dom'
import slider1 from '../../assets/sliderImg/1.jpg'
import slider2 from '../../assets/sliderImg/2.jpg'
import slider3 from '../../assets/sliderImg/3.jpg'
import slider4 from '../../assets/sliderImg/4.jpg'
import slider5 from '../../assets/sliderImg/5.jpg'
import slider6 from '../../assets/sliderImg/6.jpg'
import banner from '../../assets/sliderImg/banner.gif'

import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'

export default class Slider extends Component{
    componentDidMount(){
        var swiper = new Swiper('.swiper-container', {
            autoplay:{
                delay:3000,
                disableOnInteraction: false,
            },
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            }
          });
        var comtainer = document.getElementById('swiper_container');
        comtainer.onmouseenter = function () {
            swiper.autoplay.stop();
        };
        comtainer.onmouseleave = function () {
            swiper.autoplay.start();
        }
    }
    render(){
        return(
            <Fragment>
                <div className="swiper-container" id="swiper_container">
                    <div className="swiper-wrapper">
                        <div className="swiper-slide">
                            <NavLink to='/'>
                                <img src = {slider1} alt=''/>
                            </NavLink>
                        </div>
                        <div className="swiper-slide">
                            <NavLink to='/prodetails'>
                            <img src = {slider2} alt=''/>
                            </NavLink>
                        </div>
                        <div className="swiper-slide">
                            <NavLink to='/prodetails'>
                            <img src = {slider3} alt=''/>
                            </NavLink>
                        </div>
                        <div className="swiper-slide">
                            <NavLink to='/prodetails'>
                            <img src = {slider4} alt=''/>
                            </NavLink>
                        </div>
                        <div className="swiper-slide">
                            <NavLink to='/prodetails'>
                            <img src = {slider5} alt=''/>
                            </NavLink>
                        </div>
                        <div className="swiper-slide">
                            <NavLink to='/prodetails'>
                            <img src = {slider6} alt=''/>
                            </NavLink>
                        </div>
                    </div>
                    <div className="swiper-pagination"></div>
                </div>
                <div className = 'home-banner'>
                    <img src= {banner} alt=''/>
                </div>
            </Fragment>
        )
    }
}